<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/site-nav-top.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/mainnav.css">
    <link rel="stylesheet" href="./css/lifestudy.css">
    <link rel="stylesheet" href="./css/position.css">
	<link rel="stylesheet" href="./css/navmenu.css">
	<link rel="stylesheet" href="./css/slider.css">
	<link rel="stylesheet" href="./css/hotsale.css">
	<link rel="stylesheet" href="./css/headline.css">
</head>

<body>
    <!-- position start -->
    <div class="site-position">
        <i class="icon-wangwang"></i>
        <div class="site-position-inner">
            <a href="#" class="position-block active">
                爱逛<br /> 好货
            </a>
            <a href="#" class="position-block pink">
                好店<br /> 直播
            </a>
            <a href="#" class="position-block purple">
                品质<br /> 特色
            </a>
            <a href="#" class="position-block green">
                实惠<br /> 热卖
            </a>
            <a href="#" class="position-block tb-red">
                猜你<br /> 喜欢
            </a>
            <a href="#" class="position-block" style="line-height: 30px;">
                <span>反馈</span>
            </a>
            <a href="#" class="position-block">
                暴恐<br /> 举报
            </a>
        </div>
    </div>
    <!-- position end -->

    <!-- nav-top start -->
    <div class="site-nav-top">
        <div class="layer site-nav-bd">
            <ul class="site-nav-bd-l clearfix">
                <li class="site-nav-menu site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#" class="deep">中国大陆</a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu">
                    <div class="site-nav-menu-hd">
                        <a href="#" class="rd">亲，请登录</a>
                        <a href="#">免费注册</a>
                    </div>
                </li>
                <li class="site-nav-menu">
                    <div class="site-nav-menu-hd">
                        <a href="#">手机逛淘宝</a>
                    </div>
                </li>
            </ul>
            <ul class="site-nav-bd-r clearfix">
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">我的淘宝</a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">
                            <span class="fa fa-shopping-cart rd"></span>
                            购物车
                        </a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">
                            <span class="fa fa-star"></span>
                            收藏夹
                        </a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu">
                    <div class="site-nav-menu-hd">
                        <a href="#">商品分类</a>
                    </div>
                </li>
                <li class="site-nav-pipe">|</li>
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">卖家中心</a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">联系客服</a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
                <li class="site-nav-menu  site-nav-border">
                    <div class="site-nav-menu-hd">
                        <a href="#">
                            <span class="fa fa-bars rd"></span>
                            网站导航
                        </a>
                        <span class="fa fa-angle-down"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- nav-top end -->
    <!-- header start -->
    <div class="header">
        <div class="layer header-bd">
            <div class="header-wrap clearfix">
                <div class="header-logo">
                    <h1>
                        <a href="#" class="logo-bd">淘宝网</a>
                    </h1>
                </div>
                <div class="header-search">
                    <div class="search-tab">
                        <ul class="tab-list">
                            <li class="tab-item active">宝贝</li>
                            <li class="tab-item">天猫</li>
                            <li class="tab-item">店铺</li>
                        </ul>
                    </div>
                    <div class="search-panal">
                        <div class="input-wrap">
                            <i class="fa fa-search"></i>
                            <i class="fa fa-camera"></i>
                            <input type="text" class="search-input" placeholder="沙拉神器">
                        </div>
                        <div class="button-wrap">
                            <button>搜索</button>
                        </div>
                    </div>
                    <div class="search-ft">
                        <a href="#" class="ft-link rd">夹克</a>
                        <a href="#" class="ft-link">时尚连衣裙</a>
                        <a href="#" class="ft-link rd">衬衫</a>
                        <a href="#" class="ft-link">妈妈装</a>
                        <a href="#" class="ft-link">新款男鞋</a>
                        <a href="#" class="ft-link rd">新款裤子</a>
                        <a href="#" class="ft-link">阔腿裤</a>
                        <a href="#" class="ft-link">时尚休闲裤</a>
                        <a href="#" class="ft-link">双肩包</a>
                        <a href="#" class="ft-link">沙发</a>
                        <a href="#" class="ft-link">定制窗帘</a>
                        <a href="#" class="ft-link">蚊帐</a>
                        <a href="" class="ft-link fr">
                            更多
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
                </div>
                <div class="header-qr">
                    <div class="close-btn">
                        <i class="fa fa-times"></i>
                    </div>
                    <a href="#" class="qr-bd">
                        <span>手机淘宝</span>
                        <img src="./img/qr.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- header end -->
    <!-- main nav start -->
    <div class="main-nav">
        <div class="layer main-nav-bd clearfix">
            <h2>主题市场</h2>
            <ul class="nav-list main-nav-list">
                <li class="nav-item">
                    <a href="#" class="nav-link">天猫</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">聚划算</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">天猫超市</a>
                </li>
            </ul>
            <ul class="nav-list">
                <li class="nav-pipe">|</li>
                <li class="nav-item">
                    <a href="#" class="nav-link">淘抢购</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">电器城</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">司法拍卖</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">中国质造</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">兴农扶贫</a>
                </li>
            </ul>
            <ul class="nav-list">
                <li class="nav-pipe">|</li>
                <li class="nav-item">
                    <a href="#" class="nav-link">飞猪旅行</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">只能生活</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">苏宁易购</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- main nav end -->
    <!-- main-show start -->
    <div class="layer main-show clearfix">
        <!-- main-show-left start -->
        <div class="main-show-wrap">
            <!-- main-show-left-top start -->
            <div class="main-show-t clearfix">
                <!-- nav-menu start -->
                <div class="nav-menu">
                    <ul class="menu-list">
                        <li class="menu-item">
                            <a href="" class="menu-link">女装</a> /
                            <a href="" class="menu-link">男装</a> /
                            <a href="" class="menu-link">内衣</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">鞋靴</a> /
                            <a href="" class="menu-link">箱包</a> /
                            <a href="" class="menu-link">配件</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">童装玩具</a> /
                            <a href="" class="menu-link">孕装</a> /
                            <a href="" class="menu-link">用品</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">家电</a> /
                            <a href="" class="menu-link">数码</a> /
                            <a href="" class="menu-link">手机</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">美妆</a> /
                            <a href="" class="menu-link">洗护</a> /
                            <a href="" class="menu-link">保健品</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">珠宝</a> /
                            <a href="" class="menu-link">眼镜</a> /
                            <a href="" class="menu-link">手表</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">运动</a> /
                            <a href="" class="menu-link">户外</a> /
                            <a href="" class="menu-link">乐器</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">游戏</a> /
                            <a href="" class="menu-link">动漫</a> /
                            <a href="" class="menu-link">影视</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">美食</a> /
                            <a href="" class="menu-link">生鲜</a> /
                            <a href="" class="menu-link">零食</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">鲜花</a> /
                            <a href="" class="menu-link">宠物</a> /
                            <a href="" class="menu-link">农资</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">房产</a> /
                            <a href="" class="menu-link">装修</a> /
                            <a href="" class="menu-link">建材</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">家具</a> /
                            <a href="" class="menu-link">家饰</a> /
                            <a href="" class="menu-link">家纺</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">汽车</a> /
                            <a href="" class="menu-link">二手车</a> /
                            <a href="" class="menu-link">用品</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">办公</a> /
                            <a href="" class="menu-link">DIY</a> /
                            <a href="" class="menu-link">五金电子</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">百货</a> /
                            <a href="" class="menu-link">餐厨</a> /
                            <a href="" class="menu-link">家庭保健</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li class="menu-item">
                            <a href="" class="menu-link">学习</a> /
                            <a href="" class="menu-link">卡券</a> /
                            <a href="" class="menu-link">本地服务</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                    </ul>
                </div>
                <!-- nav-menu end -->
                <!-- sliders start -->
                <div class="sliders">
                    <div class="main-slider">
                        <a href="#" class="dir-icon dir-forward">
                            <i class="fa fa-angle-right"></i>
                        </a>
                        <a href="#" class="dir-icon dir-backward">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        <div class="indicator">
                            <i class="indicator-dot cur"></i>
                            <i class="indicator-dot"></i>
                            <i class="indicator-dot"></i>
                            <i class="indicator-dot"></i>
                            <i class="indicator-dot"></i>
                        </div>
                        <ul class="main-slider-list">
                            <li class="main-slider-item">
                                <a href="#">
                                    <img src="./img/slider1/1.webp" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="goods-slider">
                        <div class="goods-slider-hd">
                            <span class="hd-img"></span>
                            <em>理想生活上天猫</em>
                            <strong>
                                <i>1</i>/6
                            </strong>
                        </div>
                        <div class="goods-slider-wrap">
                            <a href="#" class="dir-icon dir-forward">
                                <i class="fa fa-angle-right"></i>
                            </a>
                            <a href="#" class="dir-icon dir-backward">
                                <i class="fa fa-angle-left"></i>
                            </a>
                            <ul class="goods-slider-list">
                                <li class="goods-slider-item clearfix">
                                    <div class="item-l">
                                        <a href="#">
                                            <img src="./img/slider2/1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="item-r clearfix">
                                        <div class="item-r-img clear-border">
                                            <a href="#">
                                                <img src="./img/slider2/2.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="item-r-img clear-border">
                                            <a href="#">
                                                <img src="./img/slider2/3.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="item-r-img">
                                            <a href="#">
                                                <img src="./img/slider2/4.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="item-r-img">
                                            <a href="#">
                                                <img src="./img/slider2/5.jpg" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tamll-indicator">
                            <ul class="indicator-list clearfix">
                                <li class="indicator-item selected">
                                    <a href="#"></a>
                                </li>
                                <li class="indicator-item">
                                    <a href="#"></a>
                                </li>
                                <li class="indicator-item">
                                    <a href="#"></a>
                                </li>
                                <li class="indicator-item">
                                    <a href="#"></a>
                                </li>
                                <li class="indicator-item">
                                    <a href="#"></a>
                                </li>
                                <li class="indicator-item">
                                    <a href="#"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- sliders end -->
                <!-- 今日热卖 start -->
                <div class="hot-sales">
                    <div class="today-focus">
                        <a href="#">
                            <img src="./img/hot_sales/1.webp" alt="">
                        </a>
                    </div>
                    <div class="today-hot">
                        <h5>今日热卖</h5>
                        <div class="today-hot-img">
                            <a href="#">
                                <img src="./img/hot_sales/2.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 今日热卖 end -->
            </div>
            <!-- main-show-left-top end -->

            <!-- main-show-left-bottom start -->
            <div class="tb-headline">
                <h3>
                    <div class="headline-logo">
                        <em>淘宝头条</em>
                    </div>
                    <p class="headline-title">让你的生活更有趣</p>
                </h3>
                <div class="headline-bd">
                    <a href="#" class="headline-more">
                        更多
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <a href="#" class="headline-link">
                        <img src="./img/headline/1.webp" alt="">
                        <h4>十月养月季，自己做有机肥，肥料钱都省了</h4>
                        <p>10月，金秋时节，太阳高高挂，气候逐渐变凉了，月季花们纷纷抢着冒出花骨朵，尽情释放自己的美丽与优雅，这时候，营养补充就非常重要，自己在家学做有机肥，连肥料钱都省了。将废菜叶、瓜果皮、鸡和鱼的内脏、鱼鳞碎骨、蛋壳及霉变食物（花生、瓜子、豆子等）放入小缸或小坛甚至广口瓶中，加水（有条
                        </p>
                    </a>
                </div>
            </div>
            <!-- main-show-left-bottom end -->
        </div>
        <!-- main-show-left end -->

        <!-- main-show-right start -->
        <div class="funcs-wrap">
        </div>
        <!-- main-show-right end -->
    </div>
    <!-- main-show end -->
    <!-- life-study start -->
    <div class="layer life-study">
        <h3 class="life-study-title">
            <a href="#" class="title-img">
                生活研究所
            </a>
            <p class="sub-title">发现属于你的生活方式</p>
        </h3>
        <ul class="goods-list clearfix">
            <!-- 
				1190 
			 -->
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/1.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">趣玩先锋</h4>
                        <p class="sub-title">怪有意思的</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气390979
                        </p>
                    </div>
                </a>
            </li>
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/2.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">火锅爱好者</h4>
                        <p class="sub-title">无火锅不英雄</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气26499
                        </p>
                    </div>
                </a>
            </li>
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/3.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">轻微萌物癖</h4>
                        <p class="sub-title">非萌货慎入</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气917295
                        </p>
                    </div>
                </a>
            </li>
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/4.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">雅致居家控</h4>
                        <p class="sub-title">过我要的生活</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气257794
                        </p>
                    </div>
                </a>
            </li>
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/5.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">家有萌娃</h4>
                        <p class="sub-title">宝贝快快长大</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气2080136
                        </p>
                    </div>
                </a>
            </li>
            <li class="goods-item">
                <a href="#">
                    <div class="goods-img">
                        <img src="./img/life_study/6.webp" alt="">
                    </div>
                    <div class="goods-info">
                        <h4 class="main-title">租房一族</h4>
                        <p class="sub-title">生活不是租的</p>
                        <p class="other-info">
                            <i class="fa fa-heart"></i>
                            人气1557565
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- life-study end -->
</body>

</html>